<template id="debug" class="container">
    <WindowTitleBar title="测试"></WindowTitleBar>

    <div style="position: absolute; top: 40px; bottom: 10px; left: 10px; right: 10px; display: flex; flex-direction: column; border: 1px solid #ff0000;">
        <div style="height: 100px; width: 100%;"></div>
        <textarea style="flex: 1; width: 100%; height: auto;"></textarea>
    </div>
    <!-- <div class="flex-container">
        <div v-for="x in 6" class="flex-item"></div>
    </div> -->

    <!-- <div class="flex-col-container">
        <div v-for="x in 6" class="flex-col-item"></div>
    </div> -->
</template>

<script type="text/lua">
RegisterComponent("WindowTitleBar", "%vue%/Components/WindowTitleBar.html");

function OnReady()
end
</script>

<style>
.flex-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
.flex-item {
    width: 120px;
    height: 100px;
    background-color: #0000ff;
    margin-top: 20px;
}

.flex-col-container {
    height: 450px;
    width: 100%;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
}

.flex-col-item {
    width: 100px;
    height: 100px;
    background-color: #0000ff;
    margin: 20px;
}

.container {
    display: block;
    height: 100%; 
    width: 100%; 
    padding: 0px 2px 2px 2px;
    /* border: 1px solid #ffffff; */
    background: url(Texture/Aries/Creator/keepwork/Window/dakuang_32bits.png#0 0 440 93:378 43 33 44);
}
</style>